外部リンクにだけtarget= _blankをつける方法いろいろ

#Hugo

🐤JavaScriptでサイト内リンクと外部リンクを判別させる

code:baseof.html

$(document).ready( function () {

var domain = location.href.match(/^http?(s)?(:\/\/a-zA-Z0-9-.:+)/i) 0;

$('ahref^=http').not('href*="'+domain+'"').attr('target','_blank' );

})

</script>

good: Markdown側をいじる必要がない

bad: JavaScriptである

/icons/hr.icon

🐤ショートコードを使う

code:/layouts/shortcodes/exlink.html

<a href="{{ .Get "href" }}" target="_blank">{{ .Inner }}</a>

とか作っといて、Markdownには

code:hogehoge.md

{{< exlink href="https://hogehoge/" >}}hogehoge{{< /exlink >}}

とか書く。

good: ビルド時にHTMLに直接target属性が書き込まれるだけなので軽い

bad: Markdownの可読性が落ちる

/icons/hr.icon

🐤config.tomlをいじる

参考: Hugo リンクに target="_blank" をつける

code:config.toml

blackfriday

hrefTargetBlank = true

canonifyURLs = true

good: 楽

bad: canonifyURLsはもはや過去のものらしい

参考:

config.toml から canonifyurls の項目を削除 · Issue #29 · d-kusk/minimage · GitHub

Remove canonifyURLs support · Issue #4733 · gohugoio/hugo · GitHub

/icons/hr.icon

🐤Markdown Render Hooksを使う

参考:

Hugo Markdown Render Hooks 入門 - Qiita

Hugo で外部サイトを新しいタブで開きたい。 · k-kaz

code:layouts/_default/_markup/render-link.html

href="{{ .Destination | safeURL }}"

{{ with .Title }} title="{{ . }}"{{ end }}

{{ if strings.HasPrefix .Destination "http" }}target="_blank" rel="noopener"{{ end }}>

</a>

good: Markdown側をいじる必要がない

bad: サイト内リンクと外部リンクを区別しないので、サイト内リンクを相対リンクで書くようにしないといけない

現状そんなに困らないかな……？たぶんyuyuko.icon

とりあえずやってみて、不都合を感じたらやめるyuyuko.icon

hugoコマンドでビルドしたらうまくいくけど、Netlify側でビルドしてもらう（？）と効かないみたい？

@ 2023-11-03

Hugo v0.62以降で、新しいタブで外部リンクを開くようにする方法 | yhoka's blog

上記と同じ感じ